// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

import { useState } from "react";

// 封装自定义Hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或者回调return出去（以对象或者数组都行）
// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

function useToggle() {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)
  const toggle = () => setValue(!value)

  // 哪些状态和回调函数需要在其它组件中使用 return
  return {
    value, 
    toggle
  }
}

function App20() {
  // 控制div的显示和隐藏
  // 方式1：使用useState变量和定义一个函数切换布尔变量值
  // const [value, setValue] = useState(true)
  // const toggle = () => setValue(!value)

  // 问题：布尔切换逻辑跟当前组件耦合在一起，复用性差，如果哪天控制的不是div，那还得再写两行代码
  // 方式2：自定义Hook函数，复用以上代码逻辑
  // 调用自定义Hook函数，解构出需要的对象
  const {value, toggle} = useToggle()

  return (
    <div className="App">
      {value && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

export default App20
